<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航-侧边栏</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.css">

    <style type="text/css">
        @media (min-width: 768px) {
            #slider_sub {
                width: 250px;
                margin-top: 1px;
                position: absolute;
                z-index: 1;
                height: 600px;
            }

            .mysearch {
                margin: 10px 0;
            }

            .page_main {
                margin-left: 255px;
            }
        }

    </style>
</head>
<body>
<!-- 导航 -->
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#slider_sub">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">网站后台管理</a>
    </div>

    <ul class="nav navbar-nav navbar-right" style="margin-right: 25px;">
        <li>
            <a href="#"><span class="badge">23</span></a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-off"></span>
                注销
            </a>
        </li>
    </ul>
</nav>

<!-- 侧边功能栏 -->
<div class="navbar-default navbar-collapse" id="slider_sub">
    <ul class="nav">
        <li>
            <!-- 搜索 -->
            <div class="mysearch input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </li>
        <li>
            <a href="#sub1" data-toggle="collapse">系统功能</a>
            <ul id="sub1" class="nav collapse">
                <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;系统信息</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;人员信息</a></li>
            </ul>
        </li>
        <li>
            <a href="#sub2" data-toggle="collapse">栏目功能</a>
            <ul id="sub2" class="nav collapse">
                <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;系统信息</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;人员信息</a></li>
            </ul>
        </li>

    </ul>
</div>

<div class="page_main">
    <!-- 面包导航 -->
    <ol class="breadcrumb">
        <li><a href="#">管理首页</a></li>
        <li><a href="#">栏目</a></li>
        <li class="active">增加栏目</li>
    </ol>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">最新订单</div>
                <div class="panel-body">
                    <table class="table table-striped table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>订单号</th>
                            <th>订单日期</th>
                            <th>总价</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th>1</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>2</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>3</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>4</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>5</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">最新订单</div>
                <div class="panel-body">
                    <table class="table table-striped table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>订单号</th>
                            <th>订单日期</th>
                            <th>总价</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th>1</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>2</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>3</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>4</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        <tr>
                            <th>5</th>
                            <th>12345</th>
                            <th>2024-03-13 09:42:00</th>
                            <th>100.2</th>
                            <th>出库</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">最新订单</div>
            <div class="panel-body">
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>订单日期</th>
                        <th>总价</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>1</th>
                        <th>12345</th>
                        <th>2024-03-13 09:42:00</th>
                        <th>100.2</th>
                        <th>出库</th>
                    </tr>
                    <tr>
                        <th>2</th>
                        <th>12345</th>
                        <th>2024-03-13 09:42:00</th>
                        <th>100.2</th>
                        <th>出库</th>
                    </tr>
                    <tr>
                        <th>3</th>
                        <th>12345</th>
                        <th>2024-03-13 09:42:00</th>
                        <th>100.2</th>
                        <th>出库</th>
                    </tr>
                    <tr>
                        <th>4</th>
                        <th>12345</th>
                        <th>2024-03-13 09:42:00</th>
                        <th>100.2</th>
                        <th>出库</th>
                    </tr>
                    <tr>
                        <th>5</th>
                        <th>12345</th>
                        <th>2024-03-13 09:42:00</th>
                        <th>100.2</th>
                        <th>出库</th>
                    </tr>
                    </tbody>
                </table>
                <nav class="pull-right">
                    <nav aria-label="Page navigation">
                        <ul class="pagination" style="margin-top: 5px;">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </nav>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script src="../bootstrap-3.4.1/js/bootstrap.js"></script>
</body>
</html>